import React from 'react';
import { connect } from 'react-redux';
import { getList } from '../store/actionCreators.js'
import { BaseTitle, ImageWrap, ListWrap, } from '../style.js'
import dayjs from 'dayjs'
import { Link } from 'react-router-dom'

class Home extends React.PureComponent {

    getTodoList() {
        const { onClickItem, days } = this.props;
        return (
            <ListWrap>
                {
                    this.props.todoList.map(function (item, index) {
                        return (
                            <Link key={item.get('_id')} to={'/detail/' + item.get('desc')}>
                                <ImageWrap alt="" src={item.get('url')} />
                                {/* <ImageWrap alt="" key={item.get('_id')} src={item.get('url')} onClick={
                                () => onClickItem(index, item.get('desc'))
                            }/> */}
                            </Link>
                        )
                    })
                }
            </ListWrap>
        )
    };

    render() {
        return (
            <div>
                <BaseTitle>妹纸&gank.io</BaseTitle>
                {this.getTodoList()}
            </div>
        )
    };

    componentDidMount() {
        if (this.props.todoList.size === 0) {
            this.props.initList()
        }
    }
}

const mapStateToProps = (state) => {
    return {
        inputValue: state.get('inputValue'),
        list: state.get('list'),
        todoList: state.get('todoList'),
    }
};

const mapDispatchToProps = (dispatch, ownProps) => {
    return {

        initList() {
            const action = getList();
            dispatch(action);
        },

        onClickItem(index, desc) {
            const date = dayjs(desc).format('YYYY/MM/DD');
            ownProps.history.push({
                pathname: 'detail/',
                query: date,
                index: index
            })
        },

        days(desc) {
            const date = dayjs(desc).format('YYYY/MM/DD');
            return date;
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);